<template>
  <div class="user-profile">
    <div class="profile-header">
      <h2>个人信息管理</h2>
      <button @click="logout" class="logout-btn">退出登录</button>
    </div>
    
    <div class="profile-content">
      <div class="profile-card">
        <div class="profile-info">
          <div class="info-item">
            <label>用户ID:</label>
            <span>{{ user.user_id }}</span>
          </div>
          
          <div class="info-item">
            <label>用户名:</label>
            <span>{{ user.username }}</span>
          </div>
          
          <div class="info-item">
            <label>邮箱:</label>
            <input 
              v-model="editableUser.email" 
              type="email" 
              :disabled="!isEditing"
              class="editable-input"
            />
          </div>
          
          <div class="info-item">
            <label>注册时间:</label>
            <span>{{ user.registered_at || '未知' }}</span>
          </div>
          
          <div class="info-item">
            <label>状态:</label>
            <span>{{ user.status === 1 ? '正常' : '禁用' }}</span>
          </div>
        </div>
        
        <div class="profile-actions">
          <button 
            @click="toggleEdit" 
            :class="isEditing ? 'cancel-btn' : 'edit-btn'"
          >
            {{ isEditing ? '取消' : '编辑信息' }}
          </button>
          
          <button 
            v-if="isEditing" 
            @click="saveProfile" 
            class="save-btn"
          >
            保存更改
          </button>
        </div>
      </div>
      
      <div class="change-password-section">
        <h3>修改密码</h3>
        <form @submit.prevent="changePassword" class="password-form">
          <div class="form-group">
            <label for="currentPassword">当前密码:</label>
            <input 
              id="currentPassword" 
              v-model="passwordData.currentPassword" 
              type="password" 
              required
              placeholder="请输入当前密码"
            />
          </div>
          
          <div class="form-group">
            <label for="newPassword">新密码:</label>
            <input 
              id="newPassword" 
              v-model="passwordData.newPassword" 
              type="password" 
              required
              placeholder="请输入新密码"
            />
          </div>
          
          <div class="form-group">
            <label for="confirmPassword">确认新密码:</label>
            <input 
              id="confirmPassword" 
              v-model="passwordData.confirmPassword" 
              type="password" 
              required
              placeholder="请再次输入新密码"
            />
          </div>
          
          <button type="submit" class="change-password-btn">修改密码</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data() {
    return {
      user: {},
      editableUser: {},
      isEditing: false,
      passwordData: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  mounted() {
    this.loadUserProfile();
  },
  methods: {
    loadUserProfile() {
      const user = localStorage.getItem('user');
      if (user) {
        this.user = JSON.parse(user);
        this.editableUser = { ...this.user };
      } else {
        // 如果没有用户信息，重定向到首页
        this.$router.push('/');
      }
    },
    
    toggleEdit() {
      if (this.isEditing) {
        // 取消编辑，恢复原始数据
        this.editableUser = { ...this.user };
      }
      this.isEditing = !this.isEditing;
    },
    
    async saveProfile() {
      try {
        // 这里应该调用后端API更新用户信息
        // 由于当前后端没有提供更新用户信息的接口，我们暂时只更新本地存储
        const updatedUser = {
          ...this.user,
          email: this.editableUser.email
        };
        
        localStorage.setItem('user', JSON.stringify(updatedUser));
        this.user = updatedUser;
        
        this.isEditing = false;
        
        alert('个人信息更新成功');
      } catch (error) {
        console.error('更新个人信息失败:', error);
        alert('更新个人信息失败: ' + error.message);
      }
    },
    
    async changePassword() {
      if (this.passwordData.newPassword !== this.passwordData.confirmPassword) {
        alert('新密码和确认密码不一致');
        return;
      }
      
      try {
        // 这里应该调用后端API修改密码
        // 由于当前后端没有提供修改密码的接口，我们只做前端验证
        alert('密码修改功能需要后端支持，当前为演示版本');
        
        // 清空密码输入框
        this.passwordData = {
          currentPassword: '',
          newPassword: '',
          confirmPassword: ''
        };
      } catch (error) {
        console.error('修改密码失败:', error);
        alert('修改密码失败: ' + error.message);
      }
    },
    
    logout() {
      localStorage.removeItem('user');
      this.$router.push('/');
      // 触发全局登出事件
      this.$eventBus.emit('user-logout');
    }
  }
}
</script>

<style scoped>
.user-profile {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.profile-header h2 {
  margin: 0;
  color: #333;
}

.logout-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.logout-btn:hover {
  background-color: #c82333;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.profile-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.profile-info {
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item label {
  width: 120px;
  font-weight: bold;
  color: #555;
}

.info-item span {
  flex: 1;
  color: #333;
}

.info-item .editable-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.info-item .editable-input:disabled {
  background-color: #f9f9f9;
  color: #666;
}

.profile-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.edit-btn, .save-btn, .cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.edit-btn {
  background-color: #007bff;
  color: white;
}

.edit-btn:hover {
  background-color: #0056b3;
}

.save-btn {
  background-color: #28a745;
  color: white;
}

.save-btn:hover {
  background-color: #218838;
}

.cancel-btn {
  background-color: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background-color: #545b62;
}

.change-password-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.change-password-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
}

.password-form {
  max-width: 400px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.change-password-btn {
  background-color: #ffc107;
  color: #212529;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}

.change-password-btn:hover {
  background-color: #e0a800;
}

@media (max-width: 768px) {
  .user-profile {
    padding: 10px;
  }
  
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info-item label {
    width: auto;
    margin-bottom: 5px;
  }
  
  .profile-actions {
    flex-direction: column;
  }
  
  .profile-actions button {
    width: 100%;
  }
}
</style>